class Enlarge
{
    constructor(el,option={maskBg:'yellow'})
    {
        this.el=document.querySelector(el)
        this.imgObj = this.el.querySelector('.img')
        this.maskObj = this.imgObj.querySelector('.mask')
        this.enlargeObj = this.el.querySelector('.enlarge')
        this.ulLiObjs = this.el.querySelectorAll('ul li')
        this.option=option
        this.init()
    }
    init()
    {
        this.imgOver_Out()
        this.imgMove()
        this.size()
        this.confirmSelf()
        this.liOver()
    }
    confirmSelf()
    {
        this.maskObj.style.background=this.option.maskBg
    }
    imgOver_Out()
    {
        this.imgObj.onmouseover=()=>this.maskObj.style.display=this.enlargeObj.style.display='block'
        this.imgObj.onmouseout=()=>this.maskObj.style.display=this.enlargeObj.style.display='none'
    }
    imgMove()
    {
        this.imgObj.onmousemove=(evt)=>
        {
            let e = evt || window.event
            let X = e.pageX-this.el.offsetLeft-this.maskObj.offsetWidth/2
            let Y = e.pageY-this.el.offsetTop-this.maskObj.offsetHeight/2
            if(X<0)X=0
            if(Y<0)Y=0
            let maxX = this.imgObj.clientWidth-this.maskObj.offsetWidth
            let maxY = this.imgObj.clientHeight-this.maskObj.offsetHeight
            if(X>maxX)X=maxX
            if(Y>maxY)Y=maxY
            console.log(this.el.offsetTop);
            this.maskObj.style.left=X+'px'
            this.maskObj.style.top=Y+'px'
            let maskSizeX = parseInt(this.getSize(this.maskObj,'width'))
            let maskSizeY = parseInt(this.getSize(this.maskObj,'height'))
            this.enlargeObj.style.width=`${maskSizeX*this.size()}px`
            this.enlargeObj.style.height=`${maskSizeY*this.size()}px`
            this.enlargeObj.style.backgroundPosition=`-${X*this.size()}px -${Y*this.size()}px`
        }
    }
    getSize(tag,cssAttr)
    {   
        return window.getComputedStyle ? window.getComputedStyle(tag)[cssAttr] : tag.currentStyle[cssAttr]
    }
    size()
    {
        let imgSizeX = parseInt(this.imgObj.clientWidth)
        let imgSizeY = parseInt(this.imgObj.clientHeight)
        let enlargeSize = this.getSize(this.enlargeObj,'backgroundSize')
        let enlargeSizeArr = enlargeSize.split(' ')
        let enlargeObjX = parseInt(enlargeSizeArr[0])
        let enlargeObjY = parseInt(enlargeSizeArr[1])
        let pro = enlargeObjX/imgSizeX
        return pro
    }
    liOver()
    {
        this.ulLiObjs.forEach((item,i) => {
            item.onmouseover=()=>
            {   this.el.querySelector('ul li.active').className=''
                this.el.querySelectorAll('ul li')[i].className='active'
                this.imgObj.style.backgroundImage=`url(./imgs/${i+1}.jpg)`
                this.enlargeObj.style.backgroundImage=`url(./imgs/${i+1}.big.jpg)`
            }
        });
    }
   
}